<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件-子向父传参数、插槽slot</title>
</head>
<body>
<div id="app">
    <father></father>
</div>

<!-- vue2 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<script type="x-template" id="father">
    <!--html模板的另一种写法-->
    <div>
        父：{{hello}}
        <children :thief="thief">
            <p slot="slot2">我是想要加入的HTML-在子组件中的内容</p>
        </children>

    </div>
</script>

<script type="x-template" id="children">
    <div>
        子：{{hello}}
        <button @click="thief(hello)">子向父传参</button>
        <button @click="click2()">子向父传参2</button>
        <slot name="slot1">slot1:通过插槽的name来调用，会覆盖默认值</slot>
        <slot name="slot2">slot2</slot>
    </div>
</script>

<script>
    var children= {
        props:["thief"],
        name:"children",
        data(){
            return{
                hello:"hello QM"
            }
        },
        template:"#children",
        methods:{
            click2(){
                this.thief(this.hello);
                this.hello = "";
            }
        }
    };
    var father = {
        name:"father",
        template:"#father",
        data(){
            return{
                hello:""
            }
        },
        components:{
            children:children
        },
        methods:{
            thief(var1){
                this.hello = var1;
            }
        }
    };
    var app = new Vue({
        el:"#app",
        components: {
            father
        }
    });

</script>
</body>

<!-- vue3 -->
<!-- <script src="https://unpkg.com/vue@next"></script> -->
<!--<script src="https://cdn.jsdelivr.net/npm/vue@3.2.23/dist/"></script>-->
</html>